<template>
  <!-- <div class="bank_card_page">
    <div class="content">
      <div class="top_back">
        <div class="left_back_icon" @click="$router.go(-1)">
          <img src="../../assets/img/zuojiantou.png" alt />
        </div>
      </div>
      <div class="titles">
        <span>{{ addBank ? $t('hj211') : $t('hj212') }}</span>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ $t('hj213') }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankName" :disabled="!addBank" />
        </div>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ $t('hj214') }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankAddress" :disabled="!addBank" />
        </div>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ $t('hj215') }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankNo" :disabled="!addBank" />
        </div>
      </div>
      <div class="bank_name bind" @click="toSure" v-if="addBank">
        <span>{{ $t('hj216') }}</span>
      </div>
      <div class="bank_hck"></div>
      <div class="bank_code"></div>
    </div>
  </div> -->
  <div data-v-0b1b5c11="" class="bijnm">
    <div data-v-0b1b5c11="" class="headf">
      <div data-v-7793a11f="" data-v-0b1b5c11="">
        <h2 data-v-7793a11f=""><span data-v-7793a11f="" class="hbnh"><a @click="$router.go(-1)" class="fan"></a></span> 绑定银行卡
          <a data-v-7793a11f="" class="xind" style="display: none;">新增</a><a data-v-7793a11f="" class="shaux"
            style="display: none;"></a><a data-v-7793a11f="" class="xind" style="display: none;">交易记录</a></h2>
      </div>
    </div>
    <ul data-v-0b1b5c11="" class="banul">
      <li data-v-0b1b5c11=""><span data-v-0b1b5c11="">银行名称：</span>
        <input  :disabled="!addBank" v-model="bankName" placeholder="请输入银行名称">
      </li>
      <li data-v-0b1b5c11=""><span data-v-0b1b5c11="">开户支行：</span><input data-v-0b1b5c11="" :disabled="!addBank" v-model="bankAddress" placeholder="请输入开户支行"></li>
    </ul>
    <ul data-v-0b1b5c11="" class="banul">
      <li data-v-0b1b5c11=""><span data-v-0b1b5c11="">卡号：</span><input data-v-0b1b5c11="" :disabled="!addBank" v-model="bankNo" placeholder="请输入你的银行卡号"></li>
      
       <!-- <li data-v-0b1b5c11=""><span data-v-0b1b5c11="">开户地址：</span><input data-v-0b1b5c11="" placeholder="请输入开户行地址"></li>  -->
    </ul>
    <div data-v-0b1b5c11="" @click="toSure" v-if="addBank" class="enter">提交</div>
    <div data-v-0b1b5c11="" @click="$router.push('/bankUpDate')" v-if="!addBank" class="enter" >更换</div>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, bankNoReg, isName } from '@/utils/utils'

export default {
  name: "bankCard",
  data() {
    return {
      bankName: "", //银行名称,
      bankAddress: "", //需要精确到分行或者支行,
      bankNo: "", // 印象卡号
      addBank: false
    };
  },
  created() {
    this.getCardDetail();
  },
  methods: {
    async toSure() {
      // 添加银行卡
      if (isNull(this.bankNo) || !bankNoReg(this.bankNo)) {
        Toast(this.$t("hj217"));
      } else if (isNull(this.bankName) || !isName(this.bankName)) {
        Toast(this.$t("hj218"));
      } else if (isNull(this.bankAddress) || !isName(this.bankAddress)) {
        Toast(this.$t("hj219"));
      } else {
        let opts = {
          bankName: this.bankName,
          bankNo: this.bankNo,
          bankAddress: this.bankAddress
        };
        let data = await api.addBankCard(opts);
        if (data.status === 0) {
          Toast(this.$t("hj220"));
          this.$router.push("/newUser");
        } else {
          Toast(data.msg);
        }
      }
    },
    async getCardDetail() {
      // 获取银行卡信息
      let data = await api.getBankCard()
      if (data.status === 0) {
        const { bankAddress, bankName, bankNo } = data.data;
        this.bankAddress = bankAddress;
        this.bankName = bankName;
        this.bankNo = bankNo;
        this.addBank = false;
      } else {
        this.addBank = true;
      }
    },
  }
};
</script>

<style scoped lang="less">
.bank_card_page {
  width: 100%;
  height: 100%;
  background: #fff;

  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.6rem;

    .top_back {
      width: 100%;
      height: 2rem;

      >div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }

    .titles {
      width: 100%;
      height: 1.5rem;
      font-size: 0.641rem;
      margin-top: 1rem;

      span {
        font-weight: 600;
      }
    }
  }

  .bank_name {
    width: 100%;
    height: 1.5rem;
    display: flex;
    padding: 0 0.2rem;
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;

    .lefts {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.3846rem;

      span {
        font-weight: 600;
      }
    }

    .rights {
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      input {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.bank_name.bind {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d6ae9;
  font-size: 0.4103rem;
  color: #fff;

  span {
    font-weight: 600;
  }
}

</style>


<style scoped>
.bijnm {
    background: #f0f0f0;
    min-height: 100vh;
}


.headf{
    width: 100%;
    height: 1.1748rem;
    background: linear-gradient(-55deg,rgb(241, 22, 20), rgb(241, 22, 20));
}
h2 {
    text-align: center;
    height: 1.2549rem;
    width: 100%;
    position: relative;
    line-height: 1.2549rem;
    font-size: 0.4806rem;
    color: #fff;
    background: transparent;
    font-weight: 500;
    z-index: 3;
}
.hbnh{
    position: absolute;
    left: 0.4005rem;
    font-size: 0.4272rem;
    font-weight: 500;
}
 .xind {
    position: absolute;
    right: 0.4005rem;
    color: #fff;
    font-size: 0.3738rem;
    font-weight: 500;
}
 .fan {
    width: 0.2403rem;
    height: 0.4272rem;
    background: url() no-repeat 50%;
    background-size: 100%;
    display: inline-block;
    margin-right: 0.1335rem;
    vertical-align: middle;
    margin-top: -0.0534rem;
}
 .shaux {
    position: absolute;
    width: 0.4806rem;
    height: 0.4806rem;
    background: url() no-repeat 50%;
    background-size: 100%;
    right: 0.4005rem;
    top: 0.4005rem;
}
.banul {
    width: 100%;
    margin: 0 auto;
    margin-top: 0.4272rem;
    background: #fff;
}
.banul li {
    width: 9.2115rem;
    height: 1.3617rem;
    margin: 0 auto;
    border-bottom: 0.0267rem solid #ebebeb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.3617rem;
}
.banul li span {
    width: 2.403rem;
    margin-left: 0.3471rem;
    font-size: 0.3738rem;
    color: #333;
}
.banul li input {
    width: 5.874rem;
    color: #000;
    font-size: 0.4005rem;
    background: transparent;
}
.enter{
  width: 9.078rem;
    margin: 1.335rem auto;
    height:1.2015rem;
    line-height: 1.2015rem;
    text-align: center;
    color: #fff;
    font-size: 0.3738rem;
    border-radius: 0.1335rem;
    background: linear-gradient(-55deg,rgb(241, 22, 20), rgb(241, 22, 20));
}
input::-webkit-input-placeholder {
    color: #999;
}
</style>